@import '@wordpress/base-styles/variables';
@import '@automattic/typography/styles/variables';
@import 'components/variables';

/**
 * Help Center GENERAL Styles
 *
 * This file contains the general styles for the Help Center.
 *
 * THIS FILE SHOULD NOT CONTAIN ANY COMPONENT SPECIFIC STYLES.
 */
.help-center > div.help-center__container {
	background-color: #fff;
	z-index: $help-center-z-index;
	cursor: default;
	transition: max-height 0.5s;
	animation: slideIn 0.2s ease-out forwards;
	transform-origin: bottom;
	position: fixed;

	/**
	 * Generic Stylings
	 */
	font-size: $font-body-small;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
		'Helvetica Neue', sans-serif;
	font-weight: inherit;
	color: var( --studio-gray-100 );

	button.button-primary,
	button.button-secondary {
		font-size: $font-title-small;
	}

	.button {
		text-decoration: none;
		font-size: $font-body-small;
	}

	& > div {
		display: flex;
		flex-direction: column;
	}

	.help-center__container-content {
		button,
		a {
			// Remove the default focus outline on the Recent Conversations nav tabs
			&.section-nav-tab__link:focus {
				box-shadow: none;
				outline: none;
			}
		}
	}

	.help-center__section-title {
		font-size: $font-body-small;
		font-weight: 500;
		color: var( --studio-gray-100 );
		margin: 8px 0 8px 0;
	}

	/**
	 * Used on loading screens across Help Center
	 */
	.help-center__loading {
		margin: 2em 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.spinner__outer {
			border-top-color: $help-center-blue;
		}

		.spinner__inner {
			border-top-color: $help-center-blue;
			border-right-color: $help-center-blue;
		}
	}

	&.is-minimized {
		animation: none;
		.help-center__container-header {
			padding: 8px 16px;
			cursor: pointer;
			height: $head-foot-height;
		}

		.help-center__container-content {
			display: none;
		}
	}

	/**
	 * Desktop
	 */
	&.is-desktop {
		width: 410px;
		height: 80vh;
		max-height: 800px;
		border-radius: 16px;
		right: 50px;
		bottom: 50px;

		&:not( .react-draggable-dragging ) {
			transition: all 0.2s ease-in-out;
		}

		.help-center__container-content {
			visibility: visible;
		}

		&.is-minimized {
			height: $head-foot-height;
			bottom: 0;

			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;

			.help-center__container-content {
				// It's much faster to transition the help center when it's most populated child is invisible.
				visibility: hidden;
			}
		}
	}

	/**
	 * Mobile
	 */
	&.is-mobile {
		bottom: 0;
		left: 0;
		right: 0;
		/* If the masterbar is there, don't cover it, if not, go to the top. */
		top: var( --masterbar-height, 0 );
		max-height: calc( 100% - 45px );
		height: calc( 100% - var( --masterbar-height, 0 ) );
		animation: none;
		transition: none;

		&.is-minimized {
			min-height: $head-foot-height;
			max-height: $head-foot-height;
			top: calc( 100vh - #{$head-foot-height} );

			@supports ( height: 100dvh ) {
				top: calc( 100dvh - #{$head-foot-height} );
			}
		}
	}

	/**
	* Animations
	*/
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes slideIn {
		0% {
			opacity: 0;
			bottom: 30px;
		}

		100% {
			opacity: 1;
			bottom: 50px;
		}
	}

	// Text highlight color
	::selection {
		background: rgba( $help-center-blue, 0.7 );
		color: var( --color-text );
	}
}

/**
 * Popover component
 * Fixes broken popover component on frontend.
 */
.popover.help-center {
	z-index: $help-center-z-index + 1;

	.popover__arrow {
		z-index: 1;
	}

	.popover__menu {
		// Odie Chat Menu
		.help-center__container-header-menu-item {
			display: flex;
			flex-direction: row;
			align-items: center;

			&:hover,
			&:focus {
				svg {
					fill: var( --color-text-inverted );
				}
			}
		}
	}
}
